<template>
    <div class="box-list">
        <div :class="['box-item sa-flex sa-row-between',{boxActive:state.active == item.id}]" v-for="item in list" :key="item.id" @click="onClick(item)">
            <div class=" sa-line-1">{{ item.name }}</div>
            <img v-if="item.initial === '0'" class="item-icon" src="./sign.png">
        </div>
    </div>
  </template>
  <script setup>
    import { reactive, ref, onMounted, unref } from 'vue';
    import { cloneDeep } from 'lodash';
    const props = defineProps({
        list: Array,
    });
    const emits = defineEmits(['onTap']);
    const state = reactive({
        active: ''
    });
    function onClick(item){
        state.active = item.id;
        emits('onTap',item)
    }
  </script>
  <style lang="scss" scoped>
  .box-list{
    max-height: 600px;
    overflow-y: scroll;
    background-color: #031938;
    &::-webkit-scrollbar-thumb{
      background-color: rgba(255,255,255, 0.5);
    }
  }
    .box-item{
      box-sizing: border-box;
      width: 130px;
      height: 30px;
      color: #fff;
      line-height: 18px;
      padding: 0 10px;
      cursor: pointer;
      border-radius: 2px;
      box-shadow: 0 0 1px 1px #293C50;
      background:  linear-gradient(to bottom, #293C50 0%, #27384C 50%, #1E2C3C 100%);
      .item-icon{
        width: 30px;
        height: 24px;
      }
    }

    .boxActive{
      box-shadow: 0 0 1px 1px #536287;
      background:  linear-gradient(to bottom, #536287 0%, #4E5D81 50%, #404C6A 100%) !important;
    }
  </style>
  